/*
 * @Author: yangzonglong
 * @Date: 2021-03-01 13:18:46
 * @version: v1.0.0
 * @Descripttion:
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-04 16:41:29
 * @Auditor:
 */
import React from 'react';
import { FormItemProps } from 'antd/lib/form';
import useQueryControlWrap from '../../hooks/useQueryControlWrap';
import { CanvasItemProps } from '../../interface';

const HOLD = require('./hold.svg');

export interface ImgItemProps extends CanvasItemProps {
  formItemProps?: FormItemProps;
  imgProps?: { url: string };
}

const App = (props: ImgItemProps) => {
  const { formItemProps, domComplete, imgProps, ...canvasProps } = props;
  useQueryControlWrap(canvasProps.id, '', domComplete);

  return (
    <div
      {...canvasProps}
      {...formItemProps}
      style={{ padding: '8px', width: '100%', background: '#fff', textAlign: formItemProps?.style?.textAlign }}
    >
      <img
        style={{ ...formItemProps?.style, width: (formItemProps?.style?.width || 0) + 'px', height: (formItemProps?.style?.height || 0) + 'px' }}
        alt=""
        src={imgProps?.url || HOLD}
      />
    </div>
  );
};

export default App;
